<template>
  <div class="songContainer">
    <div class="header-box">
      <van-icon name="wap-home" size="24" @click="getHome()"/>
      <!-- <p class="mui-icon mui-icon-home-filled" @click="getHome()"></p> -->
      <p class="play-title">{{this.songObj.songinfo.title}}</p>
      <!-- <p class="mui-icon mui-icon-search mysearch" @click="getSearch()"></p> -->
      <van-icon name="search" size="24" @click="getSearch()"/>
    </div>
    <div class="author-box">
       <p class="play-author">{{this.songObj.songinfo.author}}</p>
    </div>
    <div class="image-box">
        <img :src="songObj.songinfo.pic_big " />
    </div>
    <div class="my-lrc">
      <textarea class="lrc" rows="4" v-model="this.lrcContent" />
    </div>
    <div class="icon-box">
      <van-icon name="like-o" size="24" class="myHeart"  @click="toggle" v-if="!flag"/>
      <van-icon name="like" size="24" class="myHeart"  @click="collection" color="#ff0000" v-if="flag" />
      <van-icon name="down" size="24"/>
    </div>
    <div class="audio-box">
            <audio
          controls
          width="300"
          height="100"
          loop
          :src="playdata.bitrate.show_link"
        ></audio>
    </div>

  </div>
</template>
<script>
// import { Toast } from 'vant';
export default {
  data() {
    return {
      songObj: {
        songinfo: "",
        title: "",
        author: "",
        pic_big: "",
      },
      playdata: {
        bitrate: {
          show_link: ""
        }
      },
      lrcContent: "",
      flag:false,//点击爱心收藏，一开始是未收藏的状态
    };
  },
  created() {
    this.playMusic();
    this.playlrc();
  },
  methods: {
    playMusic() {
      const playURL =
        this.HOST +
        "/v1/restserver/ting?method=baidu.ting.song.play&songid=" +
        this.$route.params.song_id;
      this.$axios
        .get(playURL)
        .then(res => {
          const songObj = res.data;
          console.log(songObj);
          this.songObj.songinfo = res.data.songinfo;
          // this.songObj.songinfo.title = res.data.songinfo.title;
          // this.songObj.songinfo.author = res.data.songinfo.author;
          // this.songObj.songinfo.pic_big = res.data.songinfo.pic_big;
          // this.songObj.songinfo.lrclink = res.data.songinfo.lrclink;
          this.playdata = res.data;
          //console.log(this.playdata);
          //this.songObj.show_link = res.bitrate.show_link
          //console.log(this.songObj.show_link)
        })
        .catch();
    },
    playlrc() {
      const musiclrc =
        this.HOST +
        "/v1/restserver/ting?method=baidu.ting.song.lry&songid=" +
        this.$route.params.song_id;
      this.$axios
        .get(musiclrc)
        .then(res => {
          this.lrcContent = res.data.lrcContent;
          // console.log(this.lrcContent);
          //console.log(res);
        })
        .catch();
    },
    getHome() {
      this.$router.push({
        path: "/home"
      });
    },
    getSearch() {
      this.$router.push({
        path: "/search"
      });
    },
    toggle(flag) {
      if(flag){
        setTimeout(()=>{
          this.$notify({ type: 'success', message: '收藏成功' });
          this.$toast("收藏成功");
          this.flag = true
        },500)
      }
      
      //else{
      //   this.flag = this.flag
      //   this.$dialog
      //     .alert({
      //       message:"您确认要取消收藏吗？",
      //     })
      // }
    },
    collection(flag){
        //this.flag = this.flag
        this.$dialog.alert({message:"您确认要取消收藏吗？",})
        .then(()=>{
          setTimeout(()=>{
            this.flag = !this.flag
          },500)
        })
        .catch(()=>{
          this.flag = this.flag
        })
       
    },
    
  },
};
</script>
<style scoped>
.songContainer {
  width: 95%;
  margin-left: 3%;
}
.header-box {
  display: flex;
  justify-content:space-between;
  margin-top: 20px;
}
.play-title {
  text-align: center;
}
.play-author {
  text-align: center;
  font-size: 12px;
}
.image-box {
  width: 150px;
  height: 150px;
  margin: 50px  auto 20px;
}
.icon-box {
  display: flex;
  justify-content:space-between;
  margin-top: 10px;
}
.myHeart {
  position: absolute;
  left: 24px;
  bottom: 100px;
  font-size: 23px;
}
.myAudio {
  position: absolute;
  bottom: 30px;
  left: 24px;
}
.mylrc p {
  width: 60%;
  margin: auto;
  height: 100px;
  overflow: hidden;
}
.lrc {
  text-align: center;
  margin: 0;
  padding: 0;
}
.audio-box{
  width: 300px;
  margin: auto;
}
</style>